<template>
  <div class="rights">
    <Table :cols="cols" :data="datalist">
        <template v-slot:action="{row}">
               <el-tag v-show="index + ''===row.level" class="ml-2" :type="item.type" v-for="(item,index) in action" :key="index">
                        {{item.title}}
               </el-tag>
        </template>
    </Table>
  </div>
</template>
<script>
import { ref, reactive, toRefs,onMounted } from 'vue'
import {getroleslist} from "../../api/Permission"
import Table from '../../components/table.vue'
export default {
    setup(props) {
      const data=reactive({
        datalist:[],
          cols:[
            {
              title:'序号',
              type:'index',
              width:'100'
            },
            {
              title:'权限名称',
              name:'authName'
            },
            {
              title:'路径',
              name:'path'
            },
            {
              title:'层级',
              slot:'action'
            }
          ],
          action:[
            {id:'0',title:'一级',type:'primary'},
            {id:'1',title:'二级',type:'success'},
            {id:'2',title:'三级',type:'warning'},
          ]
      })
      onMounted(()=>{
          getlist()
      })
      const getlist=()=>{
        getroleslist().then(res=>{
          data.datalist=res.data
          console.log(res.data);
        })
      }
        return {
          getlist,
          ...toRefs(data)
        };
    },
    components: { Table }
}
</script>
<style lang="scss" scoped></style>
